Css 各種裝飾
==背景：background==
- 背景顏色
#box1 {
background: red;
}
#box2 {
background: #ff00f0;
}
#box3 {
background: rgba(244, 4, 50, 0.5);
/*
rgb 分別為紅綠藍色碼
a 為 0～1，表示透明度 */
}
- 背景圖片
#box4 { background: url('./ghost\ of\ tsushima.jpg') no-repeat bottom left; /* no-repeat 不要重複 bottom top 為 y 軸上下對齊 left right 為 x 軸左右對齊 center center 為置中 */ backgroung-image: url('./ghost\ of\ tsushima.jpg') /* 當有設置要放圖片的區塊時使用，讓圖片與區塊的 css 樣式一致 */ background-size: 300px 300px ; /* 圖片尺寸，也可以用百分比顯示，會依照比例伸縮圖片。*/ background-size: contain; /* 以圖片的正確比例（不壓縮的狀態）來填補。*/ background-size: cover; /* 常用，會讓圖片隨著視窗大小而縮放，永久填滿背景。*/ height: 500px; width: 2000px; /* 圖片超過的部分會重複顯示 */ border-radius: 50%;/* 將圖片變原形 */ overflow: hidden; /* 超過圓形的範圍會被隱藏 */ } - 背景尺寸
.main { max-width: 645px; /* 這樣設定最大寬度表示視窗比 645px 寬就會顯示 645px，比較窄就會顯示 100%，這樣就不用另外設 RWD 了 */ margin: 10% auto; background: white; white-space: nowrap; } - 註：通常不需要刻意設定 Zeplin 給的背景尺寸，除非有刻意限制。有時候背景是整個 body 的 background-color，要設也是各為 100vh / vw 或是百分比，在 zeplin 上面的尺寸大概就只是它自動幫你轉換或是給你參考的而已。
==border 與 border-radius==
#box1 {
background: red;
height: 100px;
width: 100px;
border-radius: 50%; /* 邊角弧度，50% 剛好是圓形。*/
border-top: 10px solid green; /* 邊框的寬度 型態 顏色 */
border-bottom: 10px solid yellow; /* 顏色可以透明 transparent
border-left: 10px solid purple;
border-right: 10px solid blue;
}
==padding 與 margin==
#box2 {
background: red;
height: 100px;
width: 100px;
padding: 30px 10px;
/*內容距離邊邊 30px，所以邊邊從內容往外撐大，寫兩個值就分別是內容與上下、左右的距離，
寫四個值得話順序就分別代表上右下左，順時針 */
}
#box3 {
background: green;
height: 100px;
width: 100px;
margin: 20px; /* 離外面的距離20px，所以會與其他東西產生間隔 */
margin: 0 auto; /* 一列元素沒有滿版時置中，auto 表示會自動與設定的方向產生平均的距離 */
}
* 註：chrome 瀏覽器會在整個畫面預設 margin: 8px;
==文字相關：color、font-family、font-weight、line-height、word-break 與 white-space==
#duke {
background: salmon;
height: 80px;
width: 500px;
color: rgb(10, 10, 10);
font-size: 20px;
font-size: 2rem;/*rem 是以全部的基礎字體大小為倍數的單位，所以一開始通常會先設定整個 html 的字體大小*/
/*
html {
font-size: 12px;
}
*/
font-weight: bold; /* normal: 正常 bold: 粗體 */
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* 選字型，需要電腦有支援 */
letter-spacing: 1px;
line-height: 1em; /* em 表示幾倍行高，不管字的大小行高都會依照 em 固定 */
text-align: center;
/*
x 軸水平置中對齊，若要 xy 軸完全置中可以將 line-height 調整與 height 相同，但此方法在有兩行以上的內容時會ＧＧ。
亦可以不要設 height，再用 padding 的方式將框框撐開，此時多行內容也會置中。
*/
word-break: break-word; /* 當文字內容很長超出設定的寬度時，break-word 幫你依照字間空白來切換行來符合寬度。
而 break-all 則是依照設定的寬度直接切字不會看空白 */
white-space: nowrap; /* 強制不要換行 */
}
==overflow 與 text-overflow==
#duke {
background: salmon;
width: 500px;
text-align: center;
white-space: nowrap; /* 強制不要換行 */
overflow: scroll; /* 應用範圍較廣，hidden: 超過的內容會隱藏 scroll: 可以滾動看超過的部分，auto 也是*/
text-overflow: ellipsis; /* 只能在文字部分使用，會把超過的部分用...蓋掉，需要前置作業 nowrap 跟 hidden */
}
==transition==
#thought {
border: 4px solid gold;
color: black;
height: 60px;
width: 120px;
margin: 10px;
font-size: 20px;
text-align: center;
line-height: 60px;
border-radius: 20px;
transition: all 0.3s ease-in;
/*
transition: 漸變效果 參數分別為：對什麼屬性作用、秒數、設定動畫方式(可以用 devtool 給設計師調)
小叮嚀：若在漸變的過程中影響到周遭元素的話可能會牽扯到效能問題，之後課程會細談。
*/
}
#thought:hover {
background: gold;
cursor: pointer; /* 鼠標的樣式 */
height: 90px; /* 也可以調整大小，這樣會有變大的動畫 */
width: 180px;
/* 註：transiton 放在 hover 的話滑鼠移開會沒效果，只有移上去有效果。*/
}
==transform==
- 搭配
transition使用效果佳。#thought:hover { background: gold; cursor: pointer; /* 鼠標的樣式 */ transform: scale(2) /*放大兩倍*/ transform: rotate(180deg) /*轉180度*/ transform: translate(10px, 20px) /*位移（x 軸, y 軸）*/ filter: brightness(1.2);/*亮度變亮 1.2 倍*/ - 也可以用來將元素移到整個畫面中間
#turtle:nth-child(2) { position: absolute; top: 50%; left:50%; /*此時元素的左上角在整個畫面的絕對位置*/ transform: translate(-50%, -50%); /*因為是元素左上角在畫面中央， 所以要再將元素往自身長寬的 50% 小幅度移動*/ } !important可以避免 css 被 bootstrap 之類的套件中的 css 蓋掉。
==盒模型 box model==
#turtle {
background: limegreen;
height: 100px;
width: 200px;
border: 5px solid black; /* 此時寬高會向外擴張 5px，整體寬高會各自增加 10px */
padding: 5px; /* 此時寬高也會向外擴張 5px，整體寬高會各自再增加 10px */
box-sizing: border-box;
/*
使用 border-box 會將 border 與 padding 納入一開始設定的寬高，原先的內容尺寸就會相對縮小，整體會維持並不會向外擴張。
若使用 content-box，就是內容會保持一開始設定的寬高，再加 border padding 就會向外擴張。
*/
font-size: 30px;
}
上述 css 示意圖
==display 的三種形式：block、inline 與 inline-block 加補充==
- ==block==:
- 代表：
<div>、<h1>、<p> - 一個元素會佔滿一整行，不會併成一列。
- 調什麼都可以，padding、寬高等等。
- 代表：
- ==inline==:
- 代表：
<span>、<a> - 調寬高沒用，上下邊距沒用，其寬度會依據內容長度來顯示。
- 代表：
- ==inline-block==:
- 代表：
<button>、<input>、<select> - 對外像 inline 可併排，對內像 block 可調各種屬性。
- 直接調整 css
display: inline-block; - 與 block 的差別是可以併成一列。
- 代表：
- ==flex==: 底下的元素可以左右並排。以下是
display: flex;的預設指令：flex-direction: row;由左到右排成一列，但在collum屬性時，底下兩指令的座標軸排列方式會不同。align-items: flex-start;justify-content: flex-start;
display: inline-flex: 範圍內的元素左右併排成一列。flex-wrap: wrap: 元素多時會自動換行。- 當視窗縮放時，flex 元素 如何處理多餘或不夠的 container(放flex 元素的地方) 空間。
flex-wrap: wrap;: 此時在視窗縮小的時候會換行。flex-grow: 數字比例: 視窗放大時多餘空間分配的比例。flex-shrink: 數字比例: 視窗所小時多餘空間分配的比例。
==定位 position==
- ==stasic==: 預設值，照順序定位。
- ==relative==: 以相對位置定位，以原本的位置為原點來做移動，不會影響其他元素的位置。(但在有其他的
<div>時會失效，原因待補)#turtle:nth-child(2) { position: relative; left: 20px; top: 30px }
- ==fixed==:相對於 viewport (瀏覽器視窗可見部分)定位，不管畫面如何滾動都會固定在設定的位置。
- ==absolute==: 針對某個參考點（往上層找第一個 position ==不是 static== 的元素）來進行定位，此時這個元素會脫離離正常的排版流程(見底下 turtle-inner)，此時若有其他普通元素則會無視使用 absolute 來定位的元素的存在，而直接遞補。
```css=<body> <div id="turtle">box1</div> <div id="turtle"> <div id="turtle-inner"> X </div> </div> <div id="turtle">box3</div> <div id="turtle">box4</div> <div id="turtle">box5</div> </body>
#turtle {
background: limegreen;
height: 100px;
width: 200px;
margin: 5px;
border: 5px solid black;
font-size: 30px;
position: relative;
}
turtle-inner {
position: absolute;
top: 10px; /若上層的 turtle 沒有設定 relative 的話則會針對 body 做定位/
right: 10px;
}
---
* ==z-index==: `z-index: number`數字越大，z 軸越大，元素可以排越上面。
* ==sticky==: 元素滾動到設定位置時會固定住。
```css=
#turtle:nth-child(2) {
z-index: 2;
position: sticky;
top: 0px; /* 網頁可以滾動時，元素頂端到達這個位置的時候黏住，常用於索引、導覽列 */
}
Css BEM 命名規則
- 狀態跟連詞的 BEM 一般==連詞會用單底線
_==、==分層雙底線__==、==狀態使用-== e.g..game_page-desc,.stream__box-empty
###### tags:Week6
